<template>
  <div class="page-h5header">
    <div class="page-h5header-menu">
      <div class="page-h5header-menuicon" v-if="!isMenu" @click="isMenu=true"></div>
      <div class="page-h5header-menucolseicon" v-if="isMenu" @click="isMenu=false"></div>
    </div>
    <div class="page-h5header-title"></div>
    <div class="page-h5header-userinfobox">
      <div class="page-h5header-userinfo" v-if="!counterStore.token" @click="setLoginShow"></div>
      <el-dropdown placement="bottom" @command="handleCommand" v-if="counterStore.token">
        <div class="page-header-userinfoicon"> 
          <el-avatar :size="40" :src="avatar" v-if="!userInfoData.avatar"/>
          <el-avatar :size="40" :src="userInfoData.avatar" v-if="userInfoData.avatar"/>
        </div> 
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="a">
              <div class="w-100" >我的分身</div>
            </el-dropdown-item>
            <el-dropdown-item command="b">
              <div class="w-100" >我的简历</div>
            </el-dropdown-item>
            <el-dropdown-item command="c">
              <div class="w-100" >退出登录</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <h5-menu v-if="isMenu"></h5-menu> 
    <h5-login v-if="counterStore.isLoginShow" @onClose="setLogin" @confirm="confirm"></h5-login>
    <userinfo-component v-if="userShow" @onClose="userShow=false" @confirm="updateConfirm"></userinfo-component>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { getUserInfo, logout } from '@/api/api'
import h5Menu from './component/h5menu.vue'
import h5Login from '@/components/login/login.vue'
import userinfoComponent from '@/components/userinfo/userinfo.vue'
import { useSideStore } from '@/store/state'
import { useRouter } from 'vue-router'
import { getToken, setKeyItem} from '@/utils/auth'
const router = useRouter();
const counterStore = useSideStore()
const userInfoData = ref({})
const isMenu = ref(false)
const isLogin = ref(false)
const userShow = ref(false)
const loginShow = ref(false)

const confirm = () => {
  loginShow.value = false 
  userShow.value = false
  // getUserInfoItem()
}


const menuClick = (e) => {
  router.push({
    path: e.path
  })
}
const myspare = () => {
  router.push({
    path:"/profile/myAgents"
  })
}

const myresume = () => {
  router.push({
    path:"/profile/resume"
  })
} 

const handleCommand = (command) => {
  switch (command) {
      case 'a':
        myspare();
        break;
      case 'b':
        myresume();
        break;
      case 'c':
        loginout();
        break; 
      default:
        break;
    }
} 

const setLoginShow = () => {
  counterStore.SETLOGINSHOW(true)
}

const setLogin = () => {
  counterStore.SETLOGINSHOW(false)
}

const loginout = () => {
  logout().then(res => {
    if (res.code == 1000) { 
      setKeyItem('bytesbayToken', "")
      setKeyItem('userInfo', "")
      counterStore.SETTOKEN('')
      router.push({
        path:"/"
      })
    }
  })
}

const updateConfirm = () => {
  userShow.value = false
  getUserInfoItem()
}


const getUserInfoItem = () => {
  getUserInfo().then(res => {
    if (res.code == 1000 ) {
      userInfoData.value = res.data
      setKeyItem("userInfo", JSON.stringify(res.data))
      if (!res.data.fullname) {
        userShow.value = true
      } else{
        userShow.value = false
      }
    }
  })
}

onMounted(() => {
  if (getToken()) {
    getUserInfoItem()
    counterStore.SETTOKEN(getToken())
  } else {
    if(router.currentRoute.value.path.indexOf('agents') == -1){
      setLoginShow()
    } 
  }
})
</script>

<style lang="scss" scoped>
  .page-h5header{
    height: 44px;
    background: #fff;
    border-bottom:rgba(140, 140, 140, 0.2) 1px solid;
    display:flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    &-menu{
      width: 44px;
      height: 44px;
    }
    &-menuicon{
      width: 44px;
      height: 44px;
      background: url("@/assets/icon/menu.svg") center center no-repeat;
      background-size: 20px auto;
    }
    &-menucolseicon{
      width: 44px;
      height: 44px;
      background: url("@/assets/icon/closeicon.svg") center center no-repeat;
      background-size: 20px auto;
    }
    &-title{
      flex:1;
      display:flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
    &-userinfobox{
      margin-right: 12px;
    }
    &-userinfo{
      min-width:40px;
      background: url("@/assets/icon/userinfo.png") center center no-repeat;
      background-size: 20px auto;
      height: 44px;
    }
  }
</style>